<template>
  <div>
    <Header />
    <div class="map_box">
      <baidu-map class="map" :center="{lng: lng, lat: lat}" :zoom="zoom">
        <my-overlay
          v-for="(item,index) in List"
          :key="index"
          :position="{lng: item.lng, lat:  item.lat}"
          :text="item"
          v-on:OnMap="OnMap"
        ></my-overlay>
      </baidu-map>
    </div>
  </div>
</template>
<script>
import rem from "@/assets/js/rem.js";
import MyOverlay from "@/components/m_file/MyOverlay.vue";
import Header from "@/components/m_file/header.vue";
export default {
  data() {
    return {
      position: {},
      index: "1",
      lng: 116.439685,
      lat: 39.92661,
      zoom: 12,
      List: []
    };
  },
  mounted() {
    this.OnStatisticsData();
  },
  methods: {
    OnStatisticsData() {
      this.instance
        .StatisticsData({})
        .then(res => {
          this.List = res.data.data;
        })
        .catch(function(error) {});
    },
    OnMap(val, idx) {
      console.log(val, idx);
      if (idx == 1) {
        this.ByCountyId(val);
      } else if (idx == 2) {
        this.BusinessAreaId(val);
      }
    },
    ByCountyId(val) {
      this.instance
        .ByCountyId({
          id: val
        })
        .then(res => {
          this.List = res.data.data;
          this.lng = this.List[0].lng;
          this.lat = this.List[0].lat;
          this.zoom = 13;
        })
        .catch(function(error) {});
    },
    BusinessAreaId(val) {
      this.instance
        .BusinessAreaId({
          id: val
        })
        .then(res => {
          this.List = res.data.data;
          this.lng = this.List[0].lng;
          this.lat = this.List[0].lat;
          this.zoom = 13;
        })
        .catch(function(error) {});
    }
  },
  components: {
    MyOverlay,
    Header
  }
};
</script>
<style  scoped>
.map {
  height: 7rem;
}
.map_box {
  height: 7rem;
}
</style>